import { FC, useEffect, ReactElement } from 'react'
import { connect, Dispatch, EvaluationStateType, Loading, history } from 'umi'
import { Location } from 'history-with-query'
import { message } from 'antd'
import { excelDownload } from '@/utils'
import styles from './index.less'
interface IProps {
  schoolUserModel: EvaluationStateType
  dispatch: Dispatch
  location: Location
}

let Status = {
  0: '禁用',
  1: '资料收集',
  2: '专家评审',
  3: '审核',
  4: '归档'
}
const ScoolUserPage: FC<IProps> = ({
  dispatch,
  schoolUserModel,
  location
}): ReactElement => {
  const { evaluationList } = schoolUserModel
  const { type } = location.query as {
    type: string
  }
  // 获取评价信息列表
  const getEvaluationList = () => {
    dispatch({
      type: 'schoolUserModel/function_getBatchInfo',
      payload: {}
    })
  }

  const handleTopic = (batchCode: string) => {
    history.replace({
      pathname: '/data-upload/topic',
      query: {
        batchCode,
        type
      }
    })
  }

  const resultDownLoad = (
    name: string,
    batchCode: string,
    unitCode?: string
  ): void => {
    dispatch({
      type: 'evaluationModel/function_downloadReport',
      payload: {
        batchCode,
        unitCode
      },
      callback: (response) => {
        message.success('下载成功')
        excelDownload(response, `${name}评价打分结果.xlsx`)
      }
    })
  }
  useEffect(() => {
    getEvaluationList()
  }, [])
  return (
    <>
      <div className={styles['school-wrapper']}>
        {evaluationList
          ?.filter((item) => item.status)
          .map((item) => (
            <div className={styles['evaluation-item']} key={item.code}>
              <div className={styles['module-title']}>
                <span>项目预览</span>
                <span className={styles.year}>
                  {new Date(item.createTime).getFullYear()}
                </span>
              </div>
              <div className={styles['module-content']}>
                <div className={styles['first-row']}>
                  <span className={styles['name']}>{item.name}</span>
                  <span className={styles['content']}>{item.content}</span>
                </div>
                <div className={styles['second-row']}>
                  <div className={styles['unit']}>
                    <span className={styles['label']}>发起单位: </span>
                    <span>{item.unit}</span>
                  </div>
                  <div>
                    <span className={styles['label']}>创建时间: </span>
                    <span>{item.createTime}</span>
                  </div>
                  <div>
                    <span className={styles['label']}>状态: </span>
                    <span>{Status[item.status]}</span>
                  </div>
                </div>

                <div>
                  {item.status === 4 && (
                    <div>
                      <span className={styles.label}>打分结果: </span>
                      <span
                        className={styles['result-download']}
                        onClick={() => resultDownLoad(item.name, item.code)}
                      >
                        下载
                      </span>
                    </div>
                  )}
                </div>

                {item.status === 1 && (
                  <div
                    onClick={() => handleTopic(item.code)}
                    className={styles['entrance']}
                  >
                    上传资料&gt;&gt;&gt;&gt;&gt;
                  </div>
                )}
              </div>
            </div>
          ))}
      </div>
    </>
  )
}

const mapStateToProps = ({
  schoolUserModel,
  loading
}: {
  schoolUserModel: EvaluationStateType
  loading: Loading
}) => {
  return {
    schoolUserModel,
    evaluationLoding: loading.models.evaluationModel
  }
}

export default connect(mapStateToProps)(ScoolUserPage)
